<template>
	<view class="container">
		<view class="picture">
			<image :src="form.alogo"></image>
		</view>
		<view class="title">
			加入协会：<text class="activity-name">{{form.aname}}</text>
		</view>
		<view class="title picker-select">
			<view class="title-lab">
				选择年：
			</view>
			<picker mode="selector" v-model="yIndex" :range="years" @change="changeYear">
				<view class="select">
					<view class="select-val">{{years[yIndex]}}</view>
					<view class="select-icon">
						
					</view>
				</view>
			</picker>
		</view>
		<view class="title">
			支付金额：<text class="fee">{{totalPrice}}元</text>
		</view>

		<view class="bottom">
			<!-- <view>
				<view class="process-box">
					<view class="process-bar">
						<view class="process">
							<text class="finsh">1</text>
							<text class="finsh">2</text>
							<text>3</text>
						</view>
						<view class="line-bg">
							<view class="line"></view>
						</view>
					</view>

					<view class="process-tip">
						<text>账号设置</text>
						<text>缴费中</text>
						<text>完成报名</text>
					</view>
				</view>
				<view class="pic">
					<image src=""></image>
				</view>
				<view class="wx-tip">
					微信扫—扫使用小程序
				</view>
			</view> -->
			<button class="btn-finish" @click="handleJoin">立即加入</button>
			<view class="vip-info" v-if="userInfo.vip">
				会员有效期至：<text>{{userInfo.endTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	import {
		createOrders
	} from '@/api/order.js'
	import { handleOrderPayResults } from '@/libs/order'
	import {groupdDetail} from '@/api/xiehui.js'
	export default{
		data(){
			return {
				id:1,
				form:{
					acontent:'',
					aprice:0,
					aname:'',
					alogo:'',
				},
				yIndex:0,
				years:['1年','2年','3年','4年','5年','6年','7年','8年','9年','10年']
			}
		},
		computed:{
			...mapGetters(['userInfo']),
			totalPrice(){
				let years=parseInt(this.years[this.yIndex]);
				return this.form.aprice*1*years;
			},
		},
		onShow(){
			this.init();
		},
		methods:{
			init(){
				groupdDetail({id:this.id}).then((res)=>{
					console.log(res);
					this.form=Object.assign(this.form,res.data)
				}).catch((err)=>{
					console.log(err);
				})
			},
			changeYear(e){
				this.yIndex=e.detail.value;
			},
			handleJoin(){
				let params = {
					"from": "wechat",
					"isChannel": "0", //0-微信公众号 ，1-微信小程序
					"odescribe": 2, //1-参加活动，2-加入协会
					"oremark": this.id, //活动id/协会id
					"payPrice": this.totalPrice,
					"payType": "weixin",
					"totalNum":parseInt(this.years[this.yIndex])
				};
				let uid=uni.getStorageSync('userInfo').uid;
				let key = `${uid}${new Date().getTime()}`;
				// uni.showLoading({
				// 	title:'正在支付...'
				// })
				createOrders(key, params).then((res) => {
					try{
						let payData=res.data.result.jsConfig;
						uni.showToast({
							title:'操作成功！'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
						//if(payUrl)window.location.href=payUrl;
						//if(payData)this.onBridgeReady(payData);
					}catch(e){
						//TODO handle the exception
					}
					// uni.hideLoading();
					//handleOrderPayResults.call(this, res.data, 'create')
				}).catch((err) => {
					let data=err.data;
					// uni.hideLoading();
				})
			},
			onBridgeReady(payData){
				let _this=this;
			   WeixinJSBridge.invoke(
			      'getBrandWCPayRequest', payData,
			      function(res){
					  console.log("支付状态："+res.err_msg);
			      if(res.err_msg == "get_brand_wcpay_request:ok" ){
			      // 使用以上方式判断前端返回,微信团队郑重提示：
			            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						uni.showToast({
							title:'支付成功'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1000)
			      } 
			   }); 
			},
		}
	}
</script>

<style lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
	.vip-info{
		font-size: 24rpx;
		color: #999;
		text-align: center;
		text{
			color: #f00;
		}
	}
	.picker-select{
		display: flex;
		padding: 10rpx 0;
		.title-lab{
			width: 200rpx;
		}
		picker{
			flex: 1;
		}
		.select{
			flex: 1;
			display: flex;
			align-items: center;
			height: 74rpx;
			border-radius: 74rpx;
			line-height: 74rpx;
			font-weight: normal;
			padding: 0 20rpx;
			background: #F6F6F6;
			.select-val{
				flex:1;
			}
			.select-icon{
				width: 14rpx;
				height: 25rpx;
				background: url(@/static/images/icon-arrow.png) no-repeat center;
				background-size: 100%;
			}
		}
	}
	.container {
		padding: 0 30rpx;
		background-color: #fff;
		overflow-y: auto;

		.picture {
			height: 382rpx;
			margin-bottom: 38rpx;
			background-color: #ccc;
			border-radius: 12rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 60rpx;

			text {
				margin-left: 36rpx;
			}

			.activity-name {
				font-weight: 500;
			}

			.fee {
				color: #F61B22;
			}
		}

		// 下半部分
		.bottom {
			margin-top: 80rpx;
			text-align: center;

			.process-bar {
				position: relative;
				height: 88rpx;

				// 空进度条背景
				.line-bg {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					height: 4rpx;
					width: 460rpx;
					background-color: #ccc;
					z-index: 1;

					// 实际角度条
					.line {
						width: 50%;
						height: 100%;
						background-color: #F61B22;
						transition: width 1s;
					}
				}

				.process {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					z-index: 2;
					display: flex;
					justify-content: space-between;
					background-color: transparent;
					width: 494rpx;
					margin: 0 auto;

					text {
						width: 38rpx;
						height: 38rpx;
						background-color: #ccc;
						border-radius: 50%;
						line-height: 38rpx;
						text-align: center;
						font-size: 28rpx;

						color: #fff;

						&.finsh {
							background-color: #F61B22;
							text-indent: -9999px;
							background-image: url(@/static/images/icon-ok.png);
							background-repeat: no-repeat;
							background-size: 100% 100%;
						}
					}
				}
			}

			.process-tip {

				display: flex;
				justify-content: space-around;
				width: 494rpx;
				margin: 0 auto;
				margin-bottom: 80rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #333333;
			}

			.pic {
				width: 310rpx;
				height: 310rpx;
				margin: 0 auto;
				margin-bottom: 28rpx;
				background-color: #ccc;
			}

			.wx-tip {
				margin-bottom: 60rpx;
				font-size: 28rpx;
				color: #171717;

			}

			.btn-finish {
				width: 592rpx;
				height: 90rpx;
				margin-bottom: 40rpx;
				background-color: #0F7CFF;

				border-radius: 50rpx;
				color: #fff;
				font-size: 34rpx;

			}

		}
	}
</style>
